<template>
  <div class="user1-page">
    <div class="search-params f-r a-c j-b">
      <el-form inline>
        <el-form-item label="关键词：">
          <el-input v-model="searchParams.queryName" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="onSearch">筛选</el-button>
          <el-button round @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box">
      <el-table
        v-loading="loading"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="selection" width="80px" align="center" />
        <el-table-column
          type="index"
          width="80px"
          label="序号"
          align="center"
        />
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        />
        <el-table-column label="批文附件" fixed="right" width="120px">
          <template slot-scope="scope">
            <span
              @click="copy(scope.row.file)"
              style="color: #4880FF;cursor: pointer;"
              >查看资料地址</span
            >
            <!-- <ClickDownload :file="scope.row.file"/> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import crud from "@/mixins/crud";
import { cailiaoPage } from '@/api/manageApi.js'

export default {
  name: "Index",
  mixins: [crud],
  props: {
    projectId: String
  },
  data() {
    return {
      request: {
        page: cailiaoPage
      },
      searchParams: {
        queryName: ""
      },
      columns: [
        { prop: "projectCode", label: "项目代码" },
        { prop: "approvalItemid", label: "办件编号" },
        { prop: "materialItems", label: "材料名称" },
        { prop: "enclosureName", label: "文件名称" }
      ],
      tableData: []
    };
  },
  mounted() {
    // 将callbackFun方法绑定到window对象
    window["jsonpFunc"] = _data => {
      console.log("定义的回调函数");
    };
    window["callback"] = _data => {
      console.log("定义的回调函数");
    };
    // 假设返回的为callbackFun.ajax_callback()
    window["jsonpFunc"] = {
      ajax_callback: function(_res) {
        console.log("定义的回调函数");
      }
    };
  },

  methods: {
    copy(content) {
      var input = document.createElement("input"); // js创建一个input输入框
      input.value = content; // 将需要复制的文本赋值到创建的input输入框中
      document.body.appendChild(input); // 将输入框暂时创建到实例里面
      input.select(); // 选中输入框中的内容
      document.execCommand("Copy"); // 执行复制操作
      document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
      this.$message.success("复制成功");
    },

    getQueryParams() {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      };
      return {
        ...params,
        ...this.searchParams,
        projectCode: this.projectId
      };
    },
    jsonpFunc(data) {
      console.log(data);
    },
    async godownload(url, _name) {
      this.jsonp("https://www.baidu.com/", function(ret) {
        console.log(ret);
        document.getElementsByTagName("body")[0].innerHTML = JSON.stringify(
          ret
        );
      });
    },
    jsonp(url, callback) {
      // const script = document.createElement('script');
      const fName =
        "myjsonp" +
        Math.random()
          .toString()
          .replace(".", "");
      // window[fName] = option.success
      var ele = document.createElement("script");
      ele.src = url + "?callback=" + fName;
      window[fName] = function(data) {
        // eslint-disable-next-line no-undef
        callback(data);

        document.body.removeChild(ele);
      };

      document.body.appendChild(ele);
      // console.log(script);
      // script.onload = () => {
      //   document.body.removeChild(script)
      // }
    }
  }
};
</script>

<style scoped lang="scss"></style>
